<template>
  <master title="课程列表">
    <div class="searchForm">
      <div class="searchFormInputs">
        <el-input class="searchFormInput" v-model="params.title" placeholder="按照课程名字查找"></el-input>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="searchList()">查询</el-button>
      <div class="searchFormBtn">
        <el-button type="success" icon="el-icon-plus" @click="edit()">增加</el-button>
      </div>
    </div>
    <!-- vis关系图基础展示 -->



    <el-dialog title="提示" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
      <span>
        <div id="mynetwork" style="width:100%; height:500px;border:1px solid #ccc;"></div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>


    <div class="el-table">
      <el-table :data="rows" stripe style="width: 100%">
        <!-- <el-table-column prop="id" label="ID">
        </el-table-column> -->
        <el-table-column fixed="left" prop="courseName" label="课程名" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="type" label="类型" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="major" label="专业" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="introduce" label="介绍" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="classHour" label="课时">
        </el-table-column>
        <el-table-column prop="remark" label="备注" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="status" label="状态">
        </el-table-column>
        <!-- <el-table-column prop="createTime" label="创建时间">
        </el-table-column>
        <el-table-column prop="createBy" label="创建人">
        </el-table-column>
        <el-table-column prop="createTimeString" label="创建时间字符串">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间">
        </el-table-column>
        <el-table-column prop="updateTimeString" label="更新时间字符串">
        </el-table-column>
        <el-table-column prop="state" label="删除逻辑">
        </el-table-column>
        <el-table-column prop="updateBy" label="更新人">
        </el-table-column>
        <el-table-column prop="unitId" label="关联ID">
        </el-table-column> -->
        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="info" icon="el-icon-s-opportunity" size="mini" @click="dialogVisible = true">知识图谱</el-button>
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-edit" @click="delelt(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="editForm.id ? '修改课程' : '新增课程'" :visible.sync="visible">
      <el-form ref="editForm" :model="editForm">
        <!-- <el-form-item label="ID">
          <el-input v-model="editForm.id" placeholder="ID" ></el-input>
        </el-form-item> -->
        <div style="display: flex;flex-direction: row;justify-content: space-around">
          <el-form-item label="课程名">
            <el-input v-model="editForm.course_name" placeholder="课程名"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="editForm.type" placeholder="类型"></el-input>
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="editForm.major" placeholder="专业"></el-input>
          </el-form-item>
        </div>

        <div style="display: flex;flex-direction: row;justify-content: space-around">
          <el-form-item label="介绍">
            <el-input v-model="editForm.introduce" placeholder="介绍"></el-input>
          </el-form-item>
          <el-form-item label="课时">
            <el-input v-model="editForm.class_hour" placeholder="课时"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-input v-model="editForm.status" placeholder="状态"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="editForm.remark" placeholder="备注"></el-input>
          </el-form-item>
        </div>

        <!-- <el-form-item label="createTime">
          <el-input v-model="editForm.createTime" placeholder="创建时间" ></el-input>
        </el-form-item>
        <el-form-item label="createBy">
          <el-input v-model="editForm.createBy" placeholder="创建人" ></el-input>
        </el-form-item>
        <el-form-item label="createTimeString">
          <el-input v-model="editForm.createTimeString" placeholder="创建时间字符串" ></el-input>
        </el-form-item>
        <el-form-item label="updateTime">
          <el-input v-model="editForm.updateTime" placeholder="更新时间" ></el-input>
        </el-form-item>
        <el-form-item label="updateTimeString">
          <el-input v-model="editForm.createTimeString" placeholder="更新时间字符串" ></el-input>
        </el-form-item>
        <el-form-item label="state">
          <el-input v-model="editForm.state" placeholder="删除逻辑" ></el-input>
        </el-form-item>
        <el-form-item label="updateBy">
          <el-input v-model="editForm.updateBy" placeholder="更新人" ></el-input>
        </el-form-item>
        <el-form-item label="unitId">
          <el-input v-model="editForm.unitId" placeholder="关联ID" ></el-input>
        </el-form-item> -->
        <el-form-item style="text-align: right;">
          <el-button type="primary" @click="visible = false">取消</el-button>
          <el-button type="danger" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <div class="el-pagination" style="position: absolute;right: 10px;">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="params.pageNum"
        :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </master>
</template>
<script type="text/javascript">
  (function (G) {
    G.vue({
      "usingComponents": {///引入组件
        "master": "/components/Master/Master"///母版组件
      },
      "enablePullDownRefresh": true
    }, {
      data: {
        loading: false,
        
        params: {
          pageSize: 10,
          pageNum: 1,
          title: "",
        },
        total: 0,
        rows: [],
        visible: false,
        editForm: {},
        enterprise: [],
        /* 111111111111111111111111111111111111111111 */
        nodes: new vis.DataSet([
          // { id: 1, label: "Node 1" },
          // { id: 2, label: "Node 2" },
          // { id: 3, label: "Node 3" },
          // { id: 4, label: "Node 4" },
          // { id: 5, label: "Node 5" },
        ]),
        edges: new vis.DataSet([
          // { from: 1, to: 3 },
          // { from: 1, to: 2 },
          // { from: 2, to: 4 },
          // { from: 2, to: 5 },
          // { from: 3, to: 3 },
        ]),
        dialogVisible: false
        /* 111111111111111111111111111111111111111111 */
      },
      methods: {
        edit(row) {
          if (row) {
            this.editForm = row
            // console.log("this.editForm",this.editForm);
            this.visible = true
          } else {
            this.visible = true
            this.editForm = {};//清空编辑表单内容
            // alert("没有选择数据")
          }
        },
        open(row) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // console.log("row", row.id);
            G.delete('{JAVAURL}/sp-course/detailByid?id=' + row.id)
            this.getList()
            // console.log(typeof row.id);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        delelt(row) {
          // console.log("row", row);

          this.open(row)
        },
        save() {
          this.$refs.editForm.validate((valid) => {
            if (valid) {
              // console.log("this.editForm1", this.editForm);

              if (this.editForm.id) {
                G.put('{JAVAURL}/sp-course/courseUpdate', this.editForm).then(res => {
                  if (!res.errorMsg) {
                    this.visible = false//控制表单显示
                    G.toask('编辑课程成功')
                    this.params.pageNum = 1
                    this.getList()
                  }
                })
              } else {
                // console.log("this.editForm2", this.editForm);
                G.post('{JAVAURL}/sp-course/courseAdd', this.editForm).then(res => {
                // G.post('/api/model/v_course',this.editForm).then(res => {
                  if (!res.errorMsg) {
                    this.visible = false//控制表单显示
                    G.toask('添加课程成功')
                    this.params.pageNum = 1
                    this.getList()
                  }
                })
              }
            }
          })
        },
        sizeChange(pageSize) {
          this.params.pageSize = pageSize;
          this.params.pageNum = 1;
          this.getList();
        },
        currentChange(pageNum) {
          this.params.pageNum = pageNum;
          this.getList();
        },
        searchList() {
          console.log(this.params.title);
          G.get('{JAVAURL}/sp-course/detailByname?title=' + this.params.title).then((res) => {
            // console.log(res);
            this.loading = false;
            this.total = res.data.length;
            this.rows = res.data;
          });
        },
        getList() {
          this.loading = true;
          this.editForm = {};//清空编辑表单内容
          G.get('{JAVAURL}/sp-course/list', this.params).then((res) => {
          // G.get('/api/model/v_course',this.params).then((res) => {
            // console.log("getList(res)",res);
            this.loading = false;
            this.total = res.total;
            this.rows = res.rows;
          });
        },
        /* 1111111111111111111111111111111111111111111111111111111111111111111111111111111 */
        getNetList() {
          G.get('{JAVAURL}/sp-chapter/list1').then((res) => {
            console.log("getNetList(res)", res);
            res.data.map(item => {
              // this.nodes = new vis.DataSet([]);
              this.nodes.add({ id: item.id, label: item.chapterName });
            })
            res.data.map(item => {
              // this.edges = new vis.DataSet([]);
              this.edges.add({ from: item.id, to: item.parentId });
            })
          });
        },
        initNetwork() {
          this.$nextTick(() => {
            // 确保网络图初始化在弹窗显示时执行
            const container = document.getElementById("mynetwork");
            if (container) {
              const data = {
                nodes: this.nodes,
                edges: this.edges,
              };
              const options = {
                layout: {
                  hierarchical: {
                    direction: "DU", // 从上到下 (UD = Up to Down)
                    sortMethod: "directed", // 按方向排列
                    nodeSpacing: 300, // 节点间距
                    levelSeparation: 200, // 层间距
                  },
                },
                nodes: {
                  shape: "box",
                  font: {
                    size: 12,
                    multi: true,
                  },
                  widthConstraint: {
                    maximum: 200,
                  },
                  heightConstraint: {
                    minimum: 30,
                  },
                },
                edges: {
                  arrows: {
                    to: { enabled: true, scaleFactor: 0.5 },
                  },
                  color: "#848484",
                  width: 2,
                  hoverWidth: 4,
                },
                physics: {
                  barnesHut: {
                    gravitationalConstant: -2000,
                    centralGravity: 0.3,
                    springLength: 150,
                    springConstant: 0.04,
                  },
                  stabilization: {
                    iterations: 150,
                  },
                },
                interaction: {
                  hover: true,
                  navigationButtons: true,
                  zoomView: true,
                },
              };

              new vis.Network(container, data, options);
            } else {
              console.error("容器元素 #mynetwork 未找到");
            }
          });
        },

        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => { });
        },
        /* 1111111111111111111111111111111111111111111111111111111111111111111111111111111 */
      },
      mounted() {
        this.getList();
        this.getNetList();
      },

      watch: {
        dialogVisible(newVal) {
          if (newVal) {
            this.initNetwork(); // 弹窗打开时初始化网络图
          }
        }
      },
    });
  })(Y)
</script>
<style scoped>

</style>